<template>
	<view class="address-list-container">
		<!-- 导航栏 -->
		<uni-nav-bar :title="pageTitle" left-icon="back" @clickLeft="goBack" />
		
		<!-- 地址列表 -->
		<view class="address-list" v-if="addressList.length > 0">
			<view class="address-item" 
				  v-for="address in addressList" 
				  :key="address.id"
				  @click="selectAddress(address)">
				<view class="address-content">
					<view class="receiver-info">
						<text class="receiver-name">{{ address.receiverName }}</text>
						<text class="receiver-phone">{{ address.receiverPhone }}</text>
						<text class="default-tag" v-if="address.isDefault">默认</text>
					</view>
					<text class="address-detail">
						{{ address.province }}{{ address.city }}{{ address.district }}{{ address.detailAddress }}
					</text>
				</view>
				<view class="address-actions" v-if="!isSelectMode">
					<button class="edit-btn" @click.stop="editAddress(address)">编辑</button>
					<button class="delete-btn" @click.stop="deleteAddress(address)">删除</button>
				</view>
				<uni-icons v-if="isSelectMode" type="right" size="16" color="#999"></uni-icons>
			</view>
		</view>
		
		<!-- 空状态 -->
		<view class="empty-state" v-else>
			<uni-icons type="location" size="60" color="#ccc"></uni-icons>
			<text class="empty-text">暂无收货地址</text>
			<button class="add-address-btn" @click="addAddress">添加地址</button>
		</view>
		
		<!-- 添加地址按钮 -->
		<view class="add-btn-container" v-if="addressList.length > 0 && !isSelectMode">
			<button class="add-btn" @click="addAddress">
				<uni-icons type="plus" size="20" color="white"></uni-icons>
				添加新地址
			</button>
		</view>
	</view>
</template>

<script>
import { getUserAddresses, deleteAddress } from '@/api/address.js'

export default {
	data() {
		return {
			addressList: [],
			isSelectMode: false, // 是否为选择模式
			loading: false
		}
	},
	computed: {
		pageTitle() {
			return this.isSelectMode ? '选择收货地址' : '收货地址管理'
		}
	},
	onLoad(options) {
		this.isSelectMode = options.mode === 'select'
		this.loadAddressList()
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack()
		},
		
		// 加载地址列表
		async loadAddressList() {
			if (this.loading) return
			
			this.loading = true
			try {
				const res = await getUserAddresses()
				if (res.success || res.code === 200) {
					this.addressList = res.data || []
				} else {
					uni.showToast({ title: res.message || '获取地址列表失败', icon: 'none' })
				}
			} catch (error) {
				console.error('加载地址列表失败:', error)
				uni.showToast({ title: '获取地址列表失败', icon: 'none' })
			} finally {
				this.loading = false
			}
		},
		
		// 选择地址
		selectAddress(address) {
			if (this.isSelectMode) {
				// 选择模式：返回选中的地址
				const eventChannel = this.getOpenerEventChannel()
				if (eventChannel) {
					eventChannel.emit('addressSelected', address)
				}
				uni.navigateBack()
			} else {
				// 管理模式：查看地址详情
				this.editAddress(address)
			}
		},
		
		// 添加地址
		addAddress() {
			uni.navigateTo({
				url: '/pages/address/edit'
			})
		},
		
		// 编辑地址
		editAddress(address) {
			uni.navigateTo({
				url: `/pages/address/edit?id=${address.id}`
			})
		},
		
		// 删除地址
		deleteAddress(address) {
			uni.showModal({
				title: '确认删除',
				content: '确定要删除这个收货地址吗？',
				success: async (res) => {
					if (res.confirm) {
						try {
							const result = await deleteAddress(address.id)
							if (result.success || result.code === 200) {
								uni.showToast({ title: '删除成功', icon: 'success' })
								this.loadAddressList() // 重新加载列表
							} else {
								uni.showToast({ title: result.message || '删除失败', icon: 'none' })
							}
						} catch (error) {
							console.error('删除地址失败:', error)
							uni.showToast({ title: '删除失败', icon: 'none' })
						}
					}
				}
			})
		}
	}
}
</script>

<style scoped>
.address-list-container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

/* 地址列表 */
.address-list {
	padding: 10px;
}

.address-item {
	display: flex;
	align-items: center;
	background: white;
	border-radius: 12px;
	padding: 15px;
	margin-bottom: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.address-content {
	flex: 1;
}

.receiver-info {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
}

.receiver-name {
	font-size: 16px;
	font-weight: 500;
	color: #333;
	margin-right: 12px;
}

.receiver-phone {
	font-size: 14px;
	color: #666;
	margin-right: 8px;
}

.default-tag {
	font-size: 12px;
	color: #007aff;
	background: #e6f3ff;
	padding: 2px 6px;
	border-radius: 4px;
}

.address-detail {
	font-size: 14px;
	color: #666;
	line-height: 1.4;
}

.address-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-left: 12px;
}

.edit-btn, .delete-btn {
	width: 60px;
	height: 32px;
	border: none;
	border-radius: 6px;
	font-size: 12px;
}

.edit-btn {
	background: #007aff;
	color: white;
}

.delete-btn {
	background: #ff4757;
	color: white;
}

/* 空状态 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 80px 20px;
}

.empty-text {
	font-size: 16px;
	color: #999;
	margin: 20px 0;
}

.add-address-btn {
	width: 120px;
	height: 40px;
	background: #007aff;
	color: white;
	border: none;
	border-radius: 20px;
	font-size: 14px;
}

/* 添加按钮 */
.add-btn-container {
	position: fixed;
	bottom: 30px;
	left: 20px;
	right: 20px;
	z-index: 100;
}

.add-btn {
	width: 100%;
	height: 48px;
	background: #007aff;
	color: white;
	border: none;
	border-radius: 24px;
	font-size: 16px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/* 底部留白 */
.address-list-container {
	padding-bottom: 100px;
}
</style>